import React, {useEffect, useRef, useImperativeHandle} from "react";

/**
 * useImperativeHandle：
 *     1. useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
 *     2. 在大多数情况下，应当避免使用 ref 这样的命令式代码。
 *     3. useImperativeHandle 应当与 forwardRef 一起使用。
 *     4. 以下，渲染 <FancyInput ref={fancyInputRef} /> 的父组件可以调用 fancyInputRef.current.focus()。
 *
 */
function HookTest8(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        }
    }));
    return <input ref={inputRef} />;
}
HookTest8 = React.forwardRef(HookTest8);
